<!--
 * @Author: Rachel 943701297@qq.com
 * @Date: 2022-07-17 20:53:33
 * @LastEditors: Rachel 943701297@qq.com
 * @LastEditTime: 2022-07-17 21:17:21
 * @FilePath: \JS\java-script-learning-notes\JSCode\记住用户名.html
 * @Description: 
 * 
 * Copyright (c) 2022 by Rachel 943701297@qq.com, All Rights Reserved. 
-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Remenber Name</title>
  </head>
  <body>
    <input type="text" id="username" />
    <input type="checkbox" id="remember" />记住用户名
  </body>
  <script>
    let username = document.getElementById("username");
    let rem = document.getElementById("remember");
    if (localStorage.getItem("username")) {
      username.value = localStorage.getItem("username");
      rem.checked = true;
    }
    rem.addEventListener("change", function () {
      if (this.checked) {
        // alert(username.value);
        localStorage.setItem("username", username.value);
      } else {
        localStorage.removeItem("username");
      }
    });
  </script>
</html>
